<template>
  <div>
    <Header/>
    <div class="content-left">
      <div class="left-item">
        <div class="item-content" :class="{'active-item': index === 1}" @click="saveClick">
          我的收藏
        </div>
        <div class="save-item" v-show="saveItemShow">
          <div class="save-item-content" @click="sceneClick">
            景点
            <div :class="{'save-item-active': saveItemIndex === 1}"/>
          </div>
          <div class="save-item-content" @click="hotelClick">
            酒店
            <div :class="{'save-item-active': saveItemIndex === 2}"/>
          </div>
          <div class="save-item-content" @click="postClick">
            帖子
            <div :class="{'save-item-active': saveItemIndex === 3}"/>
          </div>
        </div>
        <div class="item-content" :class="{'active-item': index === 2}" @click="vipClick">
          我的VIP
        </div>
        <div class="item-content" :class="{'active-item': index === 3}" @click="commentProblemClick">
          常见问题
        </div>
        <div class="item-content" :class="{'active-item': index === 4}" @click="feedbackClick">
          意见反馈
        </div>
        <div class="item-content" :class="{'active-item': index === 5}" @click="contactClick">
          联系我们
        </div>
        <div class="item-content" :class="{'active-item': index === 6}" @click="aboutWeClick">
          关于我们
        </div>
      </div>
    </div>
    <div class="content-right" v-if="">
      <div class="user-info">
        <div class="user-avatar">
          <img :src="userInfo.avatar" class="user-avatar"/>
        </div>
        <div class="user-basic-info">
          <div class="user-nickname">
            {{userInfo.nickname}}
            <div class="modify-user-info">
              <div class="modify-user-info-icon"/>
              <router-link :to="'/modifyUserInfo'">
                修改个人信息
              </router-link>
            </div>
          </div>
          <div class="user-info-split"/>
          <div class="user-areas">
            所在地区：{{userInfo.areas}}
          </div>
          <div class="user-areas">
            个人介绍：{{userInfo.selfhoodSign}}
          </div>
        </div>
      </div>
      <div class="clearFix"></div>
      <router-view/>
    </div>
  </div>
</template>

<script>
  import Header from '../components/common/header'

  export default {
    data() {
      return {
        index: 1,
        saveItemShow: true,
        saveItemIndex: 1,
        userInfo: {},
      }
    },
    created() {
      let info = this.$store.state.userInfo
      if (info === null) {
        this.$router.push('/login')
      }
      this.$axios({
        url: this.api.basicUserInfo,
        params: {},
        method: 'get'
      }).then(res => {
        if (res.state === 0) {
          this.userInfo = res.data
        } else {
          this.$router.push('/')
        }
      })
    },
    watch: {
      index(value) {
        if (value === 1) {
          this.saveItemShow = true
        } else {
          this.saveItemShow = false
        }
      }
    },
    methods: {
      saveClick() {
        let index = this.index
        if (index === 1) {
          this.saveItemShow = !this.saveItemShow
        } else {
          this.index = 1
        }
      },
      sceneClick() {
        this.saveItemIndex = 1
        this.$router.push('/person/saveScene')
      },
      hotelClick() {
        this.saveItemIndex = 2
        this.$router.push('/person/saveHotel')
      },
      postClick() {
        this.saveItemIndex = 3
        this.$router.push('/person/savePost')
      },
      vipClick() {
        this.index = 2
      },
      commentProblemClick() {
        this.index = 3
      },
      feedbackClick() {
        this.index = 4
      },
      contactClick() {
        this.index = 5
      },
      aboutWeClick() {
        this.index = 6
      }
    },
    components: {
      Header
    }
  }
</script>

<style scoped>
  .content-left {
    background: rgba(229, 229, 229, 1);
    border: 0px solid rgba(0, 0, 0, 1);
    opacity: 1;
    float: left;
    height: 600px;
    width: 16%;
  }

  .content-right {
    float: left;
    margin: 28px 0 0 52px;
    width: 80%;
  }

  .left-item {
    padding: 0;
    width: 100%;
  }

  .item-content {
    margin: 13px 0;
    height: 36px;
    line-height: 36px;
    font-size: 20px;
    font-weight: 400;
    color: rgba(83, 83, 83, 1);
    cursor: pointer;
  }

  .active-item {
    width: 100%;
    background: rgba(255, 244, 92, 1);
    border: 0px solid rgba(0, 0, 0, 1);
    opacity: 0.45;
  }

  .save-item {
    margin: -10px 0;
  }

  .save-item-content {
    height: 20px;
    line-height: 17px;
    cursor: pointer;
  }

  .save-item-active {
    position: relative;
    left: 42%;
    width: 36px;
    height: 1px;
    border-bottom: 1px solid rgba(245, 193, 100, 1);
  }

  .user-avatar {
    width: 140px;
    height: 140px;
    display: inline-block;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(239, 137, 137, 1);
  }

  .user-info {
    display: inline-block;
    position: relative;
    float: left;
  }

  .user-basic-info {
    margin-left: 50px;
    display: inline-block;
  }

  .user-nickname {
    display: inline-block;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
  }

  .modify-user-info {
    height: 26px;
    line-height: 26px;
    display: inline-block;
    margin-left: 75px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(153, 153, 153, 1);
    border-radius: 4px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(83, 83, 83, 1);
  }

  .modify-user-info a {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(83, 83, 83, 1);
  }

  .modify-user-info-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    overflow: hidden;
    background-size: cover;
    background: url(../assets/images/pen.png) no-repeat 100% 100%;
  }

  .user-info-split {
    width: 100%;
    height: 0px;
    margin: 15px 0 25px 0;
    background: rgba(239, 137, 137, 1);
    border: 1px solid rgba(0, 0, 0, 1);
  }

  .user-areas {
    margin-top: 15px;
    text-align: left;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(83, 83, 83, 1);
  }
</style>
